<template>
    <div class="flex flex-col gap-2 p-8">
        <div class="flex flex-row justify-between items-center mb-4">
            <div class="text-lg font-semibold text-black-100">借阅
                <span class="text-sm">记录</span>
            </div>
            <n-button type="primary" class="text-black" size="small" @click="createLoansPage">新增</n-button>
        </div>
        <div class="flex flex-row gap-1">
            <n-form-item label="书籍名称">
                <n-input v-model:value="query.name" placeholder="书籍名称" :clearable="true"></n-input>
            </n-form-item>
            <n-form-item label="借阅人">
                <n-input v-model:value="query.user" placeholder="借阅人" :clearable="true"></n-input>
            </n-form-item>
            <n-form-item label="是否归还">
                <n-select class="w-48" v-model:value="query.is_return" :clearable="true" placeholder="是否归还" :options="options"
                    label-field="name" value-field="id" />
            </n-form-item>
            <n-form-item>
                <n-button type="primary" class="text-black" @click="search()">搜索</n-button>
            </n-form-item>
        </div>
        <n-data-table :columns="columns" :data="data" :pagination="pagination" />
    </div>
</template>

<script setup>
import { defineComponent, reactive, onMounted, h } from "vue";
import { GetLoans, ReturnBook } from "../../wailsjs/go/main/App.js"
import { useRouter } from "vue-router";
import { NTag, NButton } from "naive-ui";
const router = useRouter();
const query = ref({
    name: "",
    user: "",
    is_return: 99,
})
const options = [
    {
        id: 99,
        name: "全部"
    },
    {
        id: 0,
        name: "未归还"
    },
    {
        id: 1,
        name: "已归还"
    }
]
const columns = [
    {
        title: "ID",
        key: "id"
    },
    {
        title: "书籍名称",
        key: "book.name"
    },
    {
        title: "借阅人",
        key: "user.name"
    },
    {
        title: "借阅日期",
        key: "created_at",
        render: (row, column) => {
            if (row.created_at) {
                return timeTransform(row.created_at, false);
            }
        }
    },
    {
        title: "应归还日期",
        key: "should_return_date",
        render: (row, column) => {
            if (row.should_return_date) {
                return timeTransform(row.should_return_date, true);
            }
        }
    },
    {
        title: "是否归还",
        key: "is_return",
        render: (row, column) => {
            return h(NTag, {
                type: row.is_return ? "success" : "error",
            }, () => row.is_return ? "已归还" : "未归还");
        }
    },
    {
        title: "实际归还日期",
        key: "return_date",
        render: (row, column) => {
            if (row.return_date) {
                return timeTransform(row.return_date * 1000, false);
            }
        }
    },
    {
        title: '操作',
        key: 'actions',
        render(row) {
            if (!row.is_return) {
                return h(
                    NButton,
                    {
                        type: 'primary',
                        dashed: true,
                        size: 'small',
                        onClick: () => returnBook(row.id)
                    },
                    { default: () => '归还' }
                )
            }
        }
    }
];

const data = ref([])

const timeTransform = (timestamp, end = false) => {
    const date = new Date(timestamp);

    // 使用 Date 对象的方法获取各种时间信息
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 注意月份是从0开始的，所以要加1
    const day = date.getDate();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();


    if (end) {
        // 输出时间格式
        return `${year}-${month}-${day}`;
    }

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

onMounted(() => {
    GetLoans("","", query.value.is_return).then(res => {
        data.value = res;
    })
})

const search = () => {
    console.log(query)
    GetLoans(query.value.name, query.value.user, query.value.is_return).then(res => {
        data.value = res;
    })
}

const pagination = reactive({
    page: 1,
    pageSize: 5,
    showSizePicker: true,
    pageSizes: [3, 5, 7],
    onChange: (page) => {
        pagination.page = page;
    },
    onUpdatePageSize: (pageSize) => {
        pagination.pageSize = pageSize;
        pagination.page = 1;
    }
});

const createLoansPage = () => {
    router.push({ name: "create_loan" })
}

const returnBook = (id) => {
    console.log(id)
    ReturnBook(id).then(() => {
        getLoans();
    })
}
</script>